<template>
    <section>
        <!--获取权限按钮-->
        <toolbar :buttonList="buttonList" @callFunction="callFunction"></toolbar>

        <el-table 
            :data="permissions" 
            style="width: 100%;" 
            
            ref="table"
            row-key="name"
            lazy
            :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >

            <el-table-column type="selection" width="50" /> 
            <el-table-column type="index" width="80" /> 
            <el-table-column prop="name" label="菜单/按钮" width="200" sortable >
                <template v-slot="scope">
                    <el-icon>
                        <component v-if="scope.row.icon" :is="scope.row.icon"></component>
                    </el-icon>
                    <span>{{ ' ' + scope.row.name  }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="路由地址" width="200" sortable />
            <el-table-column prop="description" label="描述" width="200" sortable />
            <el-table-column prop="isButton" label="是否按钮" width="100" sortable>
                <template v-slot="scope">
                    <el-tag :type="scope.row.isButton == 1 ? 'danger':'success'" disable-transitions>
                        {{scope.row.isButton == 1?'是':'否'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="func" label="按钮事件" width="200" sortable />
            <el-table-column prop="isHide" label="是否隐藏" width="100" sortable>
                <template v-slot="scope">
                    <el-tag :type="scope.row.isHide == 1 ? 'danger':'success'" disable-transitions>
                        {{scope.row.isHide == 1?'是':'否'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="iskeepAlive" label="keepAlive" width="100" sortable>
                <template v-slot="scope">
                    <el-tag :type="scope.row.isHide == 1 ? 'danger':'success'" disable-transitions>
                        {{scope.row.isHide == 1?'是':'否'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="" sortable />

        </el-table>

        <!--页码-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                style="float: right"
            >
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
import Toolbar from '../../components/Toolbar.vue'
import {getTreeTable} from '@/api/api'

export default({
    components:{
        Toolbar
    },
    data(){
        return{
            searchVal:'',
            total:0,
            pageSize:50,
            buttonList:[],
            permissions:[]
        }
    },
    methods:{
        callFunction(item) {
            this.searchVal = item.search;
            //const methodList = this.$options.methods;
            //methodList[item.func]();
            this[item.func](this, item);
        },
        /**获取按钮权限列表 */
        getbuttonList(path1,router){
            router.forEach(element => {
                if (path1&&element.path) {
                    if (element.path && element.path.toLowerCase() === path1.toLowerCase()) {
                        this.buttonList = element.children;
                        return;
                    } else if (element.children) {
                        this.getbuttonList(path1,element.children);
                    }
                }
            });
        },
        getPermissions(){
            let _this = this;
            let param = {
                pid:0,
                key:_this.searchVal,
                pageSize:_this.pageSize
            }

            getTreeTable(param).then(res=>{
                if(res.success){
                    //_this.total = res.response.dataCount;
                    _this.permissions = res.response;
                    console.log(_this.permissions)
                }else{
                    _this.$message.error(res.msg?res.msg:'拉取菜单列表失败！');
                }
            })
        },
        load(row,treeNode,resolve){

            console.log(treeNode)

            let _this = this;
            let param = {
                pid:row.id,
                key:_this.searchVal
            }

            getTreeTable(param).then(res=>{
                if(res.success){
                    //_this.total = res.response.dataCount;
                    resolve(res.response?res.response:[]);
                }else{
                    _this.$message.error(res.msg?res.msg:'拉取菜单列表失败！');
                }
            })
        }
    },
    mounted(){
        let routers = window.localStorage.router ? JSON.parse(window.localStorage.router) : [];
        this.getbuttonList(this.$route.path,routers);
        this.getPermissions();
    }
})
</script>